<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        #box {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        #box1 {
            margin-top: 10px;
            position: relative;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<input type="button" id="btn" value="动画 800">
<input type="button" id="btn1" value="动画 400">

<div id="box">
</div>
<div id="box1">
</div>
<script>
    var btn = document.getElementById('btn');
    var btn1 = document.getElementById('btn1');

    var box = document.getElementById('box');
    var box1 = document.getElementById('box1');

    btn.onclick = function () {
        console.log(box.style.left);
        console.log(box.offsetLeft);
        box.style.left = box.offsetLeft + 10 + "px";
        console.log(box.style.left);
        console.log(box.offsetLeft);
    }

    btn1.onclick = function () {
        console.log(box.style.left);
        console.log(box.offsetLeft);

        box.style.left = box.offsetLeft - 10 + 'px';

        console.log(box.style.left);
        console.log(box.offsetLeft);
    }
    // var timerId = null;
    // 封装动画的函数
    function animate(element, target) {
        // 通过判断，保证页面上只有一个定时器在执行动画
        if (element.timerId) {
            clearInterval(element.timerId);
            timerId = null;
        }

        element.timerId = setInterval(function () {
            // 步进  每次移动的距离
            var step = 10;
            // 盒子当前的位置
            var current = element.offsetLeft;
            // 当从400 到 800  执行动画
            // 当从800 到 400  不执行动画

            // 判断如果当前位置 > 目标位置 此时的step  要小于0
            if (current > target) {
                step = -Math.abs(step);
            }

            // Math.abs(current - target)   < Math.abs(step)
            if (Math.abs(current - target) < Math.abs(step)) {
                // 让定时器停止
                clearInterval(element.timerId);
                // 让盒子到target的位置
                element.style.left = target + 'px';
                return;
            }
            // 移动盒子
            current += step;
            element.style.left = current + 'px';
        }, 30);
    }
</script>
</body>
</html>
